<template>
	<view class="goods_list">
		<!-- 搜索框开始 -->
		<SearchInput />
		<!-- 搜索框结束 -->
		<!-- tabs栏开始 -->
		<Tabs :tabs="tabs" @tabsChange="handleTabsChange" />
		<!-- tabs栏结束 -->
		<!-- 列表内容开始 -->
		<view v-if="tabs[0].isActive">
			<view class="goods_list_content">
				<navigator :url="'/pages/goods_detail/main?goods_id='+item.goods_id" v-for="(item,index) in goods"
					:key="item.goods_id" class="list_item">
					<view class="image_wrapper">
						<image
							:src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'"
							mode="widthFix"></image>
					</view>
					<view class="list_desc">
						<view class="title">{{item.goods_name}}</view>
						<view class="price">￥{{item.goods_price}}</view>
					</view>
				</navigator>

			</view>
			<!-- 列表内容结束 -->
		</view>
		<view v-if="tabs[1].isActive">2</view>
		<view v-if="tabs[2].isActive">3</view>
	</view>
</template>

<script>
	import SearchInput from "../../components/search-input.vue"
	import Tabs from "../../components/tabs.vue"
	export default {
		components: {
			SearchInput,
			Tabs
		},
		data() {
			return {
				tabs: [{
					id: 0,
					value: "综合",
					isActive: true
				}, {
					id: 1,
					value: "销量",
					isActive: false
				}, {
					id: 2,
					value: "价格",
					isActive: false
				}],
				goods: [], // 搜索的商品列表
				QueryParams: {
					pagenum: 1,
					pagesize: 10
				},
				totalPages: 0
			}
		},
		// 下拉 重新加载数据
		onPullDownRefresh: function() {
			//1. 清空原有的goods=[]

			this.goods = [];

			//2 把页面重置为1
			this.QueryParams.pagenum = 1;
			//重新发起请求
			this.getGoodsList();
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//cid query

			/* 
		   PageObject[] getCurrentPages()
		  获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
		   注意：
		 不要尝试修改页面栈，会导致路由以及页面状态错误。
		 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
		     */
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			console.log(currentPage.options);
			const {
				cid,
				query
			} = currentPage.options;
			//     const {
			//   cid,
			//   query
			// } = options;
			//如果页面有传 cid 参数过来
			if (cid) {
				this.QueryParams["cid"] = cid;
			}
			if (query) {
				this.QueryParams["query"] = query;
			}
			this.getGoodsList();
		},

		/**handleTabsChange
		 * 
		 * 
		 * 页面上拉触底事件的处理函数
		 */
		//触底 加载下一页
		onReachBottom: function() {
			// scrollHeight-scrollTop-clientHeight < 10 // 认为触底
			if (this.totalPages >= this.QueryParams.pagenum) {
				this.QueryParams.pagenum++;
				this.getGoodsList();
			} else {
				uni.showToast({
					title: '已经没有下一页的数据了',
				})
			}
		},

		methods: {
			// 处理tabs 传过来的参数 tabs 存在 e.detail
			handleTabsChange: function(tabs) {
				this.tabs = tabs;
			},
			//获取列表数据
			getGoodsList: async function() {
				const goods_list = await this.$request({
					url: "/goods/search",
					data: this.QueryParams
				})
				// 总共有多少页
				this.totalPages = Math.ceil(goods_list.total / this.QueryParams.pagesize);

				//追加
				this.goods = [...this.goods, ...goods_list.goods]

				//关闭下拉提示圈
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style>
	.goods_list .goods_list_content .list_item {
		display: flex;
	}

	.goods_list .goods_list_content .list_item .image_wrapper {
		padding: 9rpx 19rpx 18rpx 41rpx;
	}

	.goods_list .goods_list_content .list_item .image_wrapper image {
		height: 191rpx;
		width: 191rpx;
	}

	.goods_list .goods_list_content .list_item .list_desc {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods_list .goods_list_content .list_item .list_desc .title {
		font-size: 24rpx;
		padding-left: 29rpx;
		padding-right: 26rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods_list .goods_list_content .list_item .list_desc .price {
		color: var(--themeColor);
		padding-left: 29rpx;
		font-size: 24rpx;
		padding-bottom: 27rpx;
	}
</style>
